<template>
	<view class="login">
		<div class="wlecom">
			<div class="title">输入验证码</div>
			<div class="info">已发送验证码至 {{phone.slice(0, 3) + '****' + phone.slice(7)}}</div>
		</div>
		<div class="input-box">
			<div>
				<input class="form-item--input" type="number" v-model="code" maxlength="11"
					placeholder="请输入验证码" />
			</div>
		</div>
		<div class="btn-box">
			<!-- 提交登录 -->
			<div v-if="code.length"  class="btn" @click="smsLoginHandle" >
				提交验证码
			</div>
			<!-- 继续获取验证码 -->
			
			<div  v-else :class="!smsState?'btn':'disabled'" @click="getMessHandle">
				<text v-if="!smsState" class="activate">获取验证码</text>
				<text v-else class="un-activate">重新发送({{ times }})秒</text>
			</div>
		</div>
	</view>
</template>

<script>
	import * as CaptchaApi from '@/api/captcha'
	import store from '@/store'
	// 倒计时时长(秒)
	const times = 60
	export default {
		data() {
			return {
				phone:'',
				code:'',
				times,
				// 短信验证码发送状态
				smsState: false,
				timer:null,
				isParty:false,
				partyData:{},
				// refereeId:''
			};
		},
		onLoad(opt) {
			this.phone = opt.phone 
			this.timers()
		},
		onHide() {
			clearInterval(this.timer)
		},
		methods:{
			smsLoginHandle(){
					const app = this
					store.dispatch('Login', {
					    smsCode: app.code,
					    mobile: app.phone,
					    isParty: app.isParty,
					    partyData: app.partyData,
					    refereeId: store.getters.refereeId
					  })
					  .then(result => {
					    // 显示登录成功
					    app.$toast(result.message)
					    // 相应全局事件订阅: 刷新上级页面数据
					    // uni.$emit('syncRefresh', true)
					    // 跳转回原页面
					    setTimeout(() => app.onNavigateBack(2), 2000)
					  })
					  .catch(err => {
					    // app.disabled = false
					    // 跳转回原页面
					    // if (err.result.data.isBack) {
					    //   setTimeout(() => app.onNavigateBack(1), 2000)
					    // }
					  })
			},
			getMessHandle(){
				if(this.smsState){
					return
				}
				let form = {
					mobile:this.phone
				}
				CaptchaApi.sendSmsCaptcha({
					form
				}).then(res=>{
						this.$toast(res.message)
						this.timers()
				})
				
			},
			/**
			 * 登录成功-跳转回原页面
			 */
			onNavigateBack(delta = 1) {
			  const pages = getCurrentPages()
			  this.$navTo('pages/index/index')
			  // if (pages.length > 1) {
			  //   uni.navigateBack({
			  //     delta: Number(delta || 1)
			  //   })
			  // } else {
			  //   this.$navTo('pages/index/index')
			  // }
			},
			// 执行定时器
			timers() {
			  const app = this
			  app.smsState = true
			  app.timer = setInterval(() => {
			    app.times = app.times - 1
			    if (app.times <= 0) {
			      app.smsState = false
			      app.times = times
			      clearInterval(app.timer)
			    }
			  }, 1000)
			},
		}
	}
</script>

<style lang="scss">
page {
		background-color: #fff;
		height: 100%;
	}

	.login {
		padding: 96rpx 80rpx 0 80rpx;

	}

	.wlecom {
		margin-bottom: 148rpx;

		.title {
			font-weight: bold;
			font-size: 56rpx;
			color: #030303;
			margin-bottom: 12rpx;
		}

		.info {
			font-weight: 400;
			font-size: 28rpx;
			color: #979699;
		}
	}

	.input-box {
		display: flex;
		align-items: center;
		font-weight: 800;
		font-size: 34rpx;
		color: #030303;
		height: 124rpx;
		border-bottom: 1rpx solid #979699;
		margin-bottom: 52rpx;
	}
	.btn-box{
		.btn{
			height: 88rpx;
			border-radius: 44rpx;
			background-color: #FF8C19;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
		}
		.disabled{
			height: 88rpx;
			border-radius: 44rpx;
			background-color: #FFDCBA;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}
</style>
